<template>
	<div class="madp-employee-statistics">
		<div v-show="!showEmpDetail">
			<div class="madp-statistics-data" v-if="contactDataObj">
				<div class="madp-statistics-title">
					<span>消息统计</span>
					<el-popover placement="bottom-start" width="500" trigger="hover">
						<div>
							<p>1、聊天总数:成员有主动发送过消息的单聊总数</p>
							<p>2、发送消息数:成员在单聊中发送的消息总数</p>
							<p>3、已回复聊天占比:客户主动发起聊天后，成员在一个自然日内有回复过消息的聊天数/客户主动发起的聊天比例</p>
							<p>4、平均首次回复时长:客户主动发起聊天后，成员在一个自然日内首次回复的时长间隔为首次回复时长</p>
						</div>
						<el-button type="text" slot="reference" style="margin-left: 20px">
							统计说明
							<i class="el-icon-question"></i>
						</el-button>
					</el-popover>
				</div>
				<tabsTime ref="tabs2" :curDeptId="curDeptId" @changeViews="changeViews2" />
				<statistics-card :cardInfo="cardInfo" :cardData="contactDataObj" />
				<div class="madp-statistics-table">
					<el-table
						:header-cell-style="{
							background: 'rgb(255, 191, 191)',
							color: 'rgb(44,44,44)',
						}"
						stripe
						:data="dateTableData"
						v-show="tableType === 1"
					>
						<el-table-column label="序号">
							<template slot-scope="scope">{{ (datePagination.current - 1) * datePagination.size + scope.$index + 1 }}</template>
						</el-table-column>
						<el-table-column prop="code" label="机构号">
							<template slot-scope="scope">{{ scope.row.code || '--' }}</template>
						</el-table-column>
						<el-table-column prop="name" label="机构名"></el-table-column>
						<el-table-column prop="chatCnt" label="聊天总数"></el-table-column>
						<el-table-column prop="messageCnt" label="发送消息数"></el-table-column>
						<el-table-column prop="replyPercentage" label="已回复聊天占比"></el-table-column>
						<el-table-column prop="avgReplyTime" label="平均首次回复时长(秒)"></el-table-column>
					</el-table>
					<el-table
						:header-cell-style="{
							background: 'rgb(255, 191, 191)',
							color: 'rgb(44,44,44)',
						}"
						stripe
						:data="dateTableData"
						v-show="tableType === 2"
					>
						<el-table-column label="序号">
							<template slot-scope="scope">{{ (datePagination.current - 1) * datePagination.size + scope.$index + 1 }}</template>
						</el-table-column>
						<el-table-column prop="code" label="账号"></el-table-column>
						<el-table-column prop="name" label="成员名"></el-table-column>
						<el-table-column prop="chatCnt" label="聊天总数"></el-table-column>
						<el-table-column prop="messageCnt" label="发送消息数"></el-table-column>
						<el-table-column prop="replyPercentage" label="已回复聊天占比"></el-table-column>
						<el-table-column prop="avgReplyTime" label="平均首次回复时长(秒)"></el-table-column>
					</el-table>
					<!-- 列表分页 -->
					<el-pagination
						background
						v-if="datePagination.total > 0"
						class="madp-black-pagination"
						@size-change="handleSizeChangeByDate"
						@current-change="handleCurrentChangeByDate"
						:current-page="datePagination.current"
						:page-sizes="[10, 20, 30, 50, 100]"
						:page-size="datePagination.size"
						layout="total, sizes, prev, pager, next, jumper"
						:total="datePagination.total"
					></el-pagination>
				</div>
			</div>
			<div class="madp-statistics-chart">
				<div class="madp-statistics-title">趋势图</div>
				<tabsTime ref="tabs3" :curDeptId="curDeptId" :form="statisticDimensionTypes" @changeViews="changeViews3" />
				<!-- 折线图 -->
				<div id="madp-chart-e7" style="width: 100%;height: 400px;margin: 30px auto;" v-show="lineChartOption.xAxis.data && lineChartOption.xAxis.data.length > 0"></div>
			</div>
		</div>
		<employee-detail v-if="showEmpDetail" :queryData="queryData" @close="changeShowEmpDetail"></employee-detail>
	</div>
</template>
<script>
import { contactData, tableDataByDate, tendencyData } from '@/api/operation-manage/employee-statistics';
import employeeDetail from '@/views/operation-manage/employee-statistics/detail';
import StatisticsCard from '@/components/statistics-card/';
import tabsTime from '@/components/tabs-time-choose';
export default {
	props: ['curDeptId', 'tableType'],
	components: {
		employeeDetail,
		StatisticsCard,
		tabsTime,
	},
	data() {
		return {
			showEmpDetail: false,
			queryData: {},
			type: 1, //维度 聊天总数、发送消息数、已回复聊天占比、平均首次回复时长
			typeName: '聊天总数',
			statisticDimensionTypes: [
				{
					label: '聊天总数',
					value: 1,
				},
				{
					label: '发送消息数',
					value: 2,
				},
				{
					label: '已回复聊天占比',
					value: 3,
				},
				{
					label: '平均首次回复时长',
					value: 4,
				},
			],
			// 联系客户数据
			contactDatePlaceholder: '自定义',
			contactDateType: '', //日期选择
			contactDateRangeVal: [],
			contactDataObj: {},
			// 趋势图相关
			tendencyDateType: '', //日期选择
			dateTypes: [
				{
					type: 0,
					label: '昨日',
				},
				{
					type: 1,
					label: '近三天',
				},
				{
					type: 2,
					label: '近一周',
				},
				{
					type: 3,
					label: '近一个月',
				},
			],
			tendencyDateRangeVal: ['2021-05-18', '2021-05-18'],
			selectedStaff: [],
			activedStaff: '',
			tendencyForm: {
				startTime: '',
				endTime: '',
			},
			dateTableData: [],
			empTableData: [],
			empPagination: {
				current: 1,
				size: 10,
			},
			datePagination: {
				current: 1,
				size: 10,
			},
			//折线图数据
			lineChartOption: {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'line', // 默认为直线，可选为:'line' | 'shadow'
					},
					formatter: '{b}<br>聊天总数: {c}条',
				},
				xAxis: {
					type: 'category',
					data: [],
				},
				yAxis: {
					name: '条',
					type: 'value',
				},
				series: [
					{
						name: '聊天总数',
						type: 'line',
						data: [],
						lineStyle: {
							color: '#ED5555',
						},
						itemStyle: {
							color: '#ED5555',
						},
					},
				],
			},
			lineChartData: [],
			barChartOption: {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'line', // 默认为直线，可选为:'line' | 'shadow'
					},
					formatter: '{b}<br>客户数: {c}',
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: [
					{
						type: 'category',
						data: [],
						axisTick: {
							alignWithLabel: true,
						},
					},
				],
				yAxis: [
					{
						type: 'value',
					},
				],
				series: [
					{
						name: '客户数',
						type: 'bar',
						barWidth: '60%',
						data: [],
						itemStyle: {
							color: '#ED5555',
						},
					},
				],
			},
			cardInfo: [
				{
					label: '聊天总数(条)',
					key: 'chatCnt',
					color: '#FFD700',
				},
				{
					label: '发送消息数(条)',
					key: 'messageCnt',
					color: '#FF8C00',
				},
				{
					label: '已回复聊天占比',
					key: 'replyPercentage',
					color: '#90EE90',
				},
				{
					label: '平均首次回复时长(分)',
					key: 'avgReplyTime',
					color: '#00CED1',
				},
			],
		};
	},
	watch: {
		curDeptId: {
			handler(val) {
				if (val != '') {
					// 联系客户数据
					this.datePagination.current = 1;
					this.datePagination.size = 10;
				}
			},
		},
	},
	created() {
		// dateType默认值为近一周
		this.contactDateType = 0;
		this.tendencyDateType = 2;
	},
	methods: {
		formatDate(val) {
			let time = new Date(val * 1000);
			let y = time.getUTCFullYear();
			let m = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
			let d = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();

			return y + '-' + m + '-' + d;
		},
		fetchTableDataByDate() {
			if (!this.$refs.tabs2) return;
			let time = this.$refs.tabs2.getTime();
			let { current, size } = this.datePagination;
			let params = {
				current,
				size,
				deptId: this.curDeptId,
				...time,
			};
			tableDataByDate(params).then((res) => {
				if (res.data && res.data.code === 0) {
					let { records, current, size, pages, total } = res.data.data;
					this.dateTableData = records;
					this.datePagination = { current, size, pages, total };
				}
			});
		},
		// 按日期查看 分页
		handleSizeChangeByDate(val) {
			this.datePagination.size = val;
			this.datePagination.current = 1;
			this.fetchTableDataByDate();
		},
		handleCurrentChangeByDate(val) {
			this.datePagination.current = val;
			this.fetchTableDataByDate();
		},
		changeShowEmpDetail() {
			this.showEmpDetail = false;
		},
		changeViews2(data) {
			let { startTime, endTime, deptId } = data;
			contactData({ startTime, endTime, deptId }).then((res) => {
				if (res.data && res.data.code === 0) {
					let { chatCnt, messageCnt, replyPercentage, avgReplyTime } = res.data.data;
					this.contactDataObj = {
						chatCnt,
						messageCnt,
						replyPercentage,
						avgReplyTime,
					};
				}
			});
			// 列表
			this.fetchTableDataByDate();
		},
		changeViews3(obj) {
			if (this.curDeptId != '') {
				tendencyData(obj).then((res) => {
					if (res.data.code != 0) return;
					let xAxisData = [];
					let seriesData = [];
					let arr = res.data.data;
					arr.map((item) => {
						xAxisData.push(item.time);
						seriesData.push(item.number);
					});
					this.lineChartOption.xAxis.data = xAxisData;
					this.lineChartOption.series[0].data = seriesData;
					let unit = '',
						yAxisName = '';
					if (this.type === 1 || this.type === 2) {
						unit = '条';
						yAxisName = '条';
					} else if (this.type === 3) {
						unit = '%';
						yAxisName = '百分比(%)';
					} else {
						unit = '分钟';
						yAxisName = '分钟(min)';
					}
					let name = '';
					name = this.statisticDimensionTypes.filter((i) => {
						return i.value === obj.type;
					})[0].label;
					this.lineChartOption.yAxis.name = yAxisName;
					this.lineChartOption.tooltip.formatter = `{b}<br>${name}: {c}${unit}`;

					let echarts = require('echarts');

					// 绘制图表
					this.$nextTick(() => {
						// 基于准备好的dom，初始化echarts实例
						let myChart = echarts.init(document.getElementById('madp-chart-e7'));
						myChart.setOption(this.lineChartOption);
						window.addEventListener('resize', function() {
							myChart.resize();
						});
					});
				});
			}
		},
	},
};
</script>
<style lang="scss" scoped>
.madp-statistics-title {
	color: #333;
	font-weight: bold;
	font-size: 20px;
	margin: 15px 0;
}

.madp-horizontal-divider {
	width: 100%;
	height: 4px;
	margin: 20px 0;
	background-color: #f0f2f5;
}
.madp-statistics-table {
	margin-top: 20px;
}
.madp-statistics-tabs {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.madp-chart-form .el-form-item {
		margin-right: 20px;
		margin-bottom: 0;
	}
	.madp-date-select {
		width: 120px;
	}
	.el-date-editor--daterange.el-input__inner {
		width: 300px;
	}
	/deep/ .el-date-editor .el-range-separator {
		width: 25px !important;
	}
	.madp-multip-select {
		width: 180px;
	}
}
.madp-table-user-wrap {
	display: flex;
	align-items: center;
	.madp-table-avatar {
		display: block;
		width: 32px;
		height: 32px;
		object-fit: contain;
		margin-right: 10px;
		border-radius: 4px;
	}
	span.madp-table-avatar {
		background-color: #ed5555;
		text-align: center;
		line-height: 32px;
		color: #fff;
	}
}
.madp-top10-total {
	font-size: 14px;
	color: #ed5555;
	margin-top: 10px;
}
/deep/ .el-button--primary.is-plain {
	background-color: #fff;
	border-color: #ed5555;
}
.madp-black-pagination {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin-top: 10px;
}
.madp-staff {
	display: flex;
	&-list {
		display: flex;
		&-item {
			border: 1px solid #e6e6e6;
			padding: 0 16px;
			margin: 0 5px;
			line-height: 34px;
			border-radius: 5px;
			cursor: pointer;
		}
	}
	&-tips {
		color: #999;
	}
}
.madp-select-staff {
	display: flex;
	flex-wrap: wrap;
	.madp-staff-list-item {
		margin: 5px;
	}
}
.madp-pop-staff {
	/deep/ .el-scrollbar {
		.el-scrollbar__wrap {
			max-height: 300px;
		}
	}
	&-item {
		display: flex;
		justify-content: space-between;
		padding: 0 16px;
		line-height: 32px;
		cursor: pointer;
		&.actived {
			background-color: #effaff;
			color: rgba(0, 0, 0, 0.65);
		}
		&.selected {
			font-weight: bold;
		}
		i {
			line-height: 32px;
		}
	}
}
</style>
